<template>
  <list-frame :show-advance-query="false" :total="totalCount" :table-data="roleAuthList" :columns="columns"
    @page-changed="pageChanged" @size-changed="sizeChanged" @query="onQuery" :operation-width="240">
    <template #base>
    </template>
    <template #append>
      <edit-auth-menu-view :role="currentRoleCode" :role-name="currentRoleName" @close="onEditAuthMenuClose"
        :visible="editAuthMenuVisible"></edit-auth-menu-view>
      <edit-auth-api-view :role="currentRoleCode" :role-name="currentRoleName" @close="onEditAuthMApiClose"
        :visible="editAuthApiVisible"></edit-auth-api-view>
    </template>
    <template #operations="row">
      <el-button type="primary" link @click="onEditAuthMenu(row)">编辑菜单权限</el-button>
      <el-button type="primary" link @click="onEditAuthApi(row)">编辑接口权限</el-button>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ApiTree from '@/server/api-tree';
import { onMounted, ref } from 'vue';
import { type RoleAuthVO, type RoleVO } from '@/server/role/types';
import EditAuthMenuView from './EditAuthMenuView.vue';
import EditAuthApiView from './EditAuthApiView.vue';
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "roleName", colName: "角色", width: 100 },
  { prop: "authMenuNames", colName: "菜单权限", width: 0 },
  { prop: "authApiNames", colName: "接口权限", width: 0 },
]);
/** 查询列表 */
const roleAuthList = ref<RoleAuthVO[]>([])
const totalCount = ref(0);
const getRoleAuthList = async () => {
  const { data } = await ApiTree.auth.list();
  if (data) {
    roleAuthList.value = roleList.value.map(role => {
      const roleAuth = data.find(x => x.role === role.code);
      return {
        role: role.code,
        roleName: role.name,
        authMenu: roleAuth?.authMenu || [],
        authApi: roleAuth?.authApi || [],
        authMenuNames: roleAuth?.authMenu.map(m => m.menu).join(";"),
        authApiNames: roleAuth?.authApi.map(m => m.apiDesc).join(";"),
      }
    })
    totalCount.value = roleList.value.length;
  }
}
const pageChanged = () => { }
const sizeChanged = () => { }
const onQuery = () => {
  getRoleAuthList();
}

/** 查询所有角色 */
const roleList = ref<RoleVO[]>([]);
const getRoleList = async () => {
  const { success, data } = await ApiTree.role.getRole();
  if (success) {
    roleList.value = data;
  }
}

/** 修改菜单权限 */
const editAuthMenuVisible = ref(false)
const currentRoleCode = ref<string>("");
const currentRoleName = ref<string>("");
const onEditAuthMenu = (row: { value: RoleAuthVO }) => {
  currentRoleCode.value = row.value.role;
  currentRoleName.value = roleList.value.find(x => x.code === row.value.role)?.name || "";
  editAuthMenuVisible.value = true;
}
const onEditAuthMenuClose = () => {
  getRoleAuthList();
  editAuthMenuVisible.value = false;
}
/** 修改API权限 */
const editAuthApiVisible = ref(false);
const onEditAuthApi = (row: { value: RoleAuthVO }) => {
  currentRoleCode.value = row.value.role;
  currentRoleName.value = roleList.value.find(x => x.code === row.value.role)?.name || "";
  editAuthApiVisible.value = true;
}
const onEditAuthMApiClose = () => {
  getRoleAuthList();
  editAuthApiVisible.value = false;
}
onMounted(async () => {
  await getRoleList();
  await getRoleAuthList();
})
</script>
<style lang="scss" scope></style>
